import {computed, reactive} from "vue";

const filters = {
    all(todoList) {
        return todoList
    },
    active(todoList) {
        return todoList.filter(todo => !todo.completed)
    },
    completed(todoList) {
        return todoList.filter(todo => todo.completed)
    }
}

export default function useFilter(todoList) {
    const filterState = reactive({
        filterItems: [
            {value: 'All', label: 'all'},
            {value: 'Active', label: 'active'},
            {value: 'Completed', label: 'completed'}
        ],
        visibility: 'all',
        filterTodo: computed(() => {
            console.log(todoList.value);
            console.log(filterState.visibility);
            return filters[filterState.visibility](todoList.value)
        })
    })
    return filterState
}

